<template>
	<joy-page class="joyPage" :needLogin="false">
		<view class="joyPage">
			<view class="detail" @tap="goPage('balanceDetail')">明细＞</view>
			<view class="info-wrapper">
				<image class="safe-img" src="/static/img/balance.png" mode="widthFix"></image>
				<view class="info-box">
					<view class="title">总资产(元)</view>
					<view class="info">{{userInfo.money}}</view>
				</view>
			</view>
			<view class="flex justify-center btn-box">
				<button class="common-btn cu-btn  bg-pink margin-right-lg" @tap="goPage('recharge')">充值</button>
				<button class="common-btn cu-btn line-pink " @tap="goPage('withdraw')">提现</button>
			</view>
		</view>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasSetPayPsw'])
		},
		data(){
			return{
				indexInfo: {}
			}
		},
		async onLoad(query) {
			await this.$AppEntryController.main(query);
		},
		onShow(){
			this.getInfo();
		},
		methods:{
			goPage(rName){
				console.log(rName)
				this.$mRouter.push({
					route: this.$mRoutesConfig[rName],
				})
			},
			async getInfo() {
				this.indexInfo= await this.$apis.getPerson();
				let userInfo = JSON.parse(JSON.stringify(this.userInfo))
				this.$store.commit("SET_USERINFO", Object.assign(userInfo, this.indexInfo) || {});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.joyPage{
		background-color: #FFFFFF;
	}
	.info-wrapper{
		position: relative;
		width: 329rpx;
		height: 329rpx;
		margin: 28rpx auto;
		z-index: 0;
		.info-box{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			z-index: 0;
		}
		.title{
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(67,67,67,1);
			line-height:43px;
		}
		.info{
			font-size:40rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(67,67,67,1);
			line-height:57rpx;
			text-align: center;
		}
	}
	.safe-img{
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 0;
	}
	.detail{
		text-align: right;
		padding: 30rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		color:rgba(51,51,51,1);
	}
	.common-btn{
		width: 178rpx;
	}
	.btn-box{
		margin-top: 100rpx;
	}
</style>
